<template>
    <div class="suspension">
        <div class="suspension-box">
            <a href="#" class="a a-service " @click="showChat">
                <img src="../../assets/img/chat.png" alt="" style="width: 40px; height: 40px; margin-left: 5px;">
            </a>
            <span class="tongzhi" v-if="tongzhi!=0">{{tongzhi}}</span>
            <a @click="notify" href="javascript:;" class="a a-service-phone ">
                <img src="../../assets/img/phone.png" alt="" style="width: 35px; height: 35px; margin-left: 5px; margin-top: 5px;">
            </a>
            <a href="javascript:;" class="a a-qrcode">
                <img src="../../assets/img/erweima.png" alt="" style="width: 35px; height: 35px; margin-left: 5px; margin-top: 5px;">
            </a>
            <a href="#" class="a a-cart" @click="openNazi">
                <img src="../../assets/img/shopCat.png" alt="" style="width: 40px; height: 40px; margin-left: 5px;">
            </a>
            <a href="javascript:;" class="a a-top"><i class="i"></i></a>
        </div>
    </div>
</template>

<script>
    import {request} from "../../network/request";

    export default {
        name: "customerService",
        data(){
            return{
                tongzhi:0
            }
        },
        methods:{
            openNazi(){
                window.open("http://www.handsomehuang.cn/");
            },
            showChat(){
                this.$parent.showChat();
            },
            notify(){
                this.$router.push("/notify");
            }

        },
        created() {
            request({
                url:"/getAllSysNotify",
                method: "post",
                params:{
                    userId:parseInt(sessionStorage.getItem("userId"))
                }
            }).then(res=>{
               // console.log(res.data);
               // this.questions = res.data;
                //alert(res.data);
                for(let i = 0; i < res.data.length; i++){
                    if(res.data[i].state == 0){
                        this.tongzhi++;
                    }
                }
              //  console.log(this.tongzhi);
            }).catch(err=>{
                //alert(err);
                console.log(err);
            });
        }


    }
</script>

<style scoped>
    /*reset*/
    .tongzhi{
        position: absolute;
        display: inline-block;
        width: 30px;
        height: 25px;
        background: #fc5531;
        right: 50px;
        top: 55px;
        line-height: 25px;
        text-align: center;
        color: #fff;
        border-radius: 5px;
    }

    a,
    button {
        cursor: pointer;
    }
    a {
        color: #333;
        outline: none;
        text-decoration: none;
    }
    a:focus {
        color: #333;
        outline: none;
        -moz-outline: none;
    }

    a:hover {
        color: #f40;
        text-decoration: none;
    }


    /*悬浮链接*/
    .suspension {
        position: fixed;
        z-index: 55;
        right: 0;
        bottom: 85px;
        width: 70px;
        height: 240px;
    }
    .suspension-box {
        position: relative;
        float: right;
    }
    .suspension .a {
        display: block;
        width: 44px;
        height: 44px;

        margin-bottom: 4px;
        cursor: pointer;
        outline: none;
    }
    .suspension .a.active,
    .suspension .a:hover {
        background: #c0c1c3;
    }
    .suspension .a .i {
        float: left;
        width: 44px;
        height: 44px;

        background-repeat: no-repeat;
    }
    /* .suspension .a-service .i{background-position:0 0;} */
    .suspension .a-service .i {
        width: 20px;
        height: 20px;
        margin-top: 12px;
        margin-left: 12px;

        background-repeat: no-repeat;
        background-position: 0 0;

    }
    .suspension .a-service-phone .i {
        width: 20px;
        height: 20px;
        margin-top: 12px;
        margin-left: 12px;

        background-repeat: no-repeat;
        background-position: -27px 0;
    }
    .suspension .a-qrcode .i {
        background-position: -44px 0;
    }
    .suspension .a-cart .i {
        background-position: -88px 0;
    }
    .suspension .a-top .i {
        background-position: -132px 0;
    }
    .suspension .a-top {
        background: #d2d3d6;
        display: none;
    }
    .suspension .a-top:hover {
        background: #c0c1c3;
    }
    .suspension .d {
        display: none;
        width: 223px;
        background: #fff;
        position: absolute;
        right: 67px;
        min-height: 90px;
        border: 1px solid #e0e1e5;
        border-radius: 3px;
        box-shadow: 0px 2px 5px 0px rgba(161, 163, 175, 0.11);
    }
    .suspension .d .arrow {
        position: absolute;
        width: 8px;
        height: 12px;

        right: -8px;
        top: 31px;
    }
    .suspension .d-service {
        top: 0;
    }
    .suspension .d-service-phone {
        top: 34px;
    }
    .suspension .d-qrcode {
        top: 78px;
    }
    .suspension .d .inner-box {
        padding: 8px 22px 12px;
    }
    .suspension .d-service-item {
        border-bottom: 1px solid #eee;
        padding: 14px 0;
    }
    .suspension .d-service .d-service-item {
        border-bottom: none;
    }
    .suspension .d-service-item .circle {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        overflow: hidden;
        background: #f1f1f3;
        display: block;
        float: left;
    }
    .suspension .d-service-item .i-qq {
        width: 44px;
        height: 44px;

        display: block;
        transition: all 0.2s;
        border-radius: 50%;
        overflow: hidden;
    }
    .suspension .d-service-item:hover .i-qq {
        background-position: center 3px;
    }
    .suspension .d-service-item .i-tel {
        width: 44px;
        height: 44px;

        display: block;
    }
    .suspension .d-service-item h3 {
        float: left;
        width: 112px;
        line-height: 44px;
        font-size: 15px;
        margin-left: 12px;
    }
    .suspension .d-service-item .text {
        float: left;
        width: 112px;
        line-height: 22px;
        font-size: 15px;
        margin-left: 12px;
    }
    .suspension .d-service-item .text .number {
        font-family: Arial, "Microsoft Yahei", "HanHei SC", PingHei, "PingFang SC",
        "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Heiti SC",
        "WenQuanYi Micro Hei", sans-serif;
    }
    .suspension .d-service-intro {
        padding-top: 10px;
    }
    .suspension .d-service-intro p {
        float: left;
        line-height: 27px;
        font-size: 12px;
        width: 50%;
        white-space: nowrap;
        color: #888;
    }
    .suspension .d-service-intro i {

        height: 27px;
        width: 14px;
        margin-right: 5px;
        vertical-align: top;
        display: inline-block;
    }
    .suspension .d-qrcode {
        text-align: center;
    }
    .suspension .d-qrcode .inner-box {
        padding: 20px 0;
    }
    .suspension .d-qrcode p {
        font-size: 16px;
        color: #93959c;
    }

</style>